{% extends "home/home.html" %}


{% block username %}
    {{ name }}
{% endblock %}

{% block content %}

    <ul class="nav nav-tabs">
        <li><a href="{{ url_for('home.fav') }}">我喜欢的音乐</a></li>
        <li><a href="{{ url_for('home.mybuy') }}">已购买</a></li>
        <li><a href="{{ url_for('home.pop') }}">Pop榜</a></li>
        <li><a href="{{ url_for('home.jazz') }}">Jazz榜</a></li>
        <li><a href="{{ url_for('home.rb') }}">R&B榜</a></li>
        <li class="active"><a href="{{ url_for('home.cla') }}">Classical榜</a></li>
        <li><a href="{{ url_for('home.folk') }}">Folk榜</a></li>
    </ul>


    <div class="col-md-12">
    <div class="row wow fadeIn" data-wow-delay="0.2s">
        {% for v in page_data %}
            <div class="media">
                <div class="media-left" style="width: 5000px;margin-right: 400px">
                    {#                    <a href="{{ url_for('home.play',id=v.music_id) }}">#}
                    <h4>{{ loop.index }}-{{ v.music_name }}</h4>
                    {#                    </a>#}
                </div>
                <div class="media-body" style="margin-left: auto">
                    <h5 class="media-heading">{{ v.author }}<a href="{{ url_for('home.play',id=v.music_id) }}"
                                                               class="label label-primary pull-right"><span
                            class="glyphicon glyphicon-play"></span>&nbsp;播放音乐</a></h5>
                    <h5 class="media-heading">播放次数：{{ v.listen }}<a href="{{ url_for('home.like',id=v.music_id) }}"
                                                                    class="label label-primary pull-right"><span
                            class="glyphicon glyphicon-star"></span>&nbsp;收藏音乐</a></h5>
                    <h5 class="media-heading">歌曲风格：{{ v.style }}
                        {% if v.free == 0 %}
                            <a href="{{ url_for('home.buy',id=v.music_id) }}"
                               class="label label-primary pull-right"><span
                                    class="glyphicon glyphicon-shopping-cart"></span>&nbsp;购买音乐</a></h5>
                        {% endif %}
                    </h5>

                </div>
            </div>
        {% endfor %}
    </div>
    </div>
{% endblock %}